<template>
  <div>
    <Card>
      <tables ref="tables" :loading="loading"  v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="totalPage" :page-size="size" :current="1" @on-change="changePage"></Page>
        </div>
    </div>
    </Card>

    <Modal v-model="showModal" title="报名信息">
      <Row>
        <Col span="24" v-for="item in htmlStr" >
        <span>{{item.attr_name.name}}:</span>
        <span>{{item.value}}</span>
      </Col>
      </Row>
    </Modal>
    
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getApplyActivityById } from "@/api/pactivity";
import ActivityDetail from "./activity-detail"
export default {
  name: "applyList",
  components: {
    Tables,
    ActivityDetail
  },
  props: {
    activity_id: Number
  },
  data() {
    return {
      columns: [
        {
          title: "头像",
          key: "avatarUrl",
          searchable: false,
          render(h, params) {
            return h("img", {
              attrs: { src: `${params.row.user.extend.avatarUrl}` },
              style: { width: "50px", height: "50px" }
            });
          }
        },
        {
          title: "昵称",
          key: "nickname",
          render(h, params) {
            return h("span", params.row.user.nickname);
          }
        },
        { title: "报名时间", key: "create_time", sortable: true },
        {
          title: "报名信息",
          key: "action",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    type: "success"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      showModal: false,
      tableData: [],
      totalPage: 0,
      size: 10,
      loading: true,
      htmlStr:[],
    };
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    changePage(e) {
      const page = e;
      const size = this.size;
      getUsers({ page, size }).then(res => {
        this.tableData = res.data.data.data;
        this.loading = false;
      });
    },
    show(row) {
      const params = row.attr;
      // var htmlStr = "";
      // if (params.length != 0) {
      //   params.forEach((item, index) => {
      //     htmlStr += item.attr_name.name + ":" + item.value + `</br>`;
      //   });
      // } else {
      //   htmlStr += "当前活动没有报名信息";
      // }
      this.htmlStr=params;
      this.showModal=true;
    }
  },
  mounted() {
    const page = 1;
    const size = this.size;
    const id = this.activity_id;
    getApplyActivityById({ id, page, size }).then(res => {
      this.totalPage = res.data.data.total;
      this.tableData = res.data.data.data;
      this.loading = false;
    });
  }
};
</script>

<style>
</style>
